<template>
    <div class="bg">
        <div class="header">
            <router-link to="/my" class="header-btnLeft"  ><img src="../assets/back-btn.png"></router-link>
            <h1 class="header-title">会员中心</h1>
            <div class="header-btnRight"></div>
        </div>
        <div class="head">
            <img class="head-avatar" :src="user_info.img ? user_info.img  : user_avatar"  preview="0"/>
            <div class="head-username">{{user_info.member_nickname}}</div>
            <div class="head-cardName">
                <span v-if="member_info.is_apply==0">普通会员</span>
                <span v-else-if="member_info.is_apply==1">会员审核中</span>
                <span v-else-if="member_info.is_apply==2">{{member_info.member_type.type_name}}</span>
            </div>
        </div>

        <div class="memberInfo">
            <div class="memberInfo-title">
                成为会员 专享特权
            </div>
            <div class="memberInfo-list">
                <router-link to="/my-add-discount" class="memberInfo-list-item">
                    <img class="memberInfo-list-item-img" src="../assets/member-tag.png"/>
                    <div class="memberInfo-list-item-title">会员折扣</div>
                    <div class="memberInfo-list-item-desc">
                        会员折扣 “可尊享会员价”
                    </div>
                </router-link>

                <router-link to="/my-add-recommend" class="memberInfo-list-item">
                    <img class="memberInfo-list-item-img" src="../assets/member-rec.png"/>
                    <div class="memberInfo-list-item-title">推荐奖励</div>
                    <div class="memberInfo-list-item-desc">
                        邀请TA人购买可得返现奖励
                    </div>
                </router-link>

            </div>
        </div>
        
        <!-- <div class="rebateInfo" v-if="member_info.member_type && member_info.member_type.per_arr && member_info.member_type.per_arr.length>0">
            <div class="rebateInfo-title">
                会员专享  返佣比例
            </div>
            <div class="rebateInfo-list">
                <div class="rebateInfo-list-item" v-for="item in member_info.member_type.per_arr" :key="item.name">
                    <div class="rebateInfo-list-item-title">{{item.name}}</div>
                    <div class="rebateInfo-list-item-desc">
                        {{parseFloat(item.per)*100}}%
                    </div>
                </div>
            </div>
        </div> -->

        <div class="panel" :class="panel_block ? 'show' : 'hide'">
            <div class="panel-margin">
                <div class="panel-title">申请已提交</div>
                <div class="panel-desc">会员申请已提交，我们将在3个工作日内进行审核，请等待反馈结果。</div>
                <div class="panel-btn" @click='closePanel'>知道了</div>
            </div>
        </div>


        <div class="bar" :class="member_info.is_apply==2 ? 'hide' : ''">
            <div class="bar-btn" :class="member_add ? 'bar-btn2' : '' " @click="memberAdd">
                <span v-if="member_info.is_apply==0">申请成为更高级会员</span>
                <span v-if="member_info.is_apply==1">申请高级会员审核中</span>
                <span v-if="member_info.is_apply==2">申请高级会员成功</span>
            </div>
        </div>
        <div class="h120"></div>
    </div>
</template>

<script>
    import {Toast} from "mint-ui"
    import storage from "../store/localstorage"
    import config from "../store/config"
    import wxShare from "../store/wxShare"
    export default {
        name: "My-add",
        data() {
            return {
                url:config.url,
                panel_block: false,
                member_add: false,
                user_avatar: require("../assets/user-avatar.png"),
                member_info: [], //0未申请 1 已申请 2 申请通过
                user_info: []
            }
        },
        methods: {
            closePanel() {
                this.panel_block = !this.panel_block
            },
            memberAdd: function () {
                var _that = this;
                if (_that.member_add || _that.member_info.is_apply) {
                    Toast({message: '请勿重复提交申请', duration:1500});
                } else {
                    var params = {
                        is_apply: 1
                    };

                    this.axios.post('wap/member/application', params)
                        .then(res => {
                            this.panel_block= true
                            this.member_add=true
                        })
                        .catch(err => console.log(err))
                }
            },
            getData() {
                this.axios.post('wap/member/isapply', {})
                    .then(res => {
                        this.member_info = res.data
                        this.share()
                    })
                    .catch(err => console.log(err))
            },
            share() {
                wxShare({title: '会员权益', debug: false}, function () {
                    console.log('分享成功')
                });
            }

        },
        mounted() {
            window.scrollTo(0,0);
            this.user_info = storage.get('userinfo')
            this.getData()
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";

    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }

    .h120 {
        height: rpx(200);
        background: $bgcolor1;
    }

    .bg {
        background: $bgcolor1;
        height: 100%;
    }

    .header {
        display: flex;
        align-items: center;
        padding: rpx(30);
        justify-content: space-between;
        background: $color0;
        &-btnLeft {
            width: rpx(64);
            height: rpx(64);
            padding-top: rpx(16);
            img {
                width: rpx(32);
                height: rpx(32);
            }
        }
        &-btnRight:after {
            display: block;
            content: ' ';
            width: rpx(64);
            height: rpx(64);
        }
        &-title {
            flex: 1;
            font-size: rpx(36);
            text-align: center;
            font-weight: normal;
        }
    }

    .head {
        margin: rpx(30);
        background: #ff7d00;
        border-radius: $radius10;
        height: rpx(420);
        text-align: center;
        &.bg2 {
            background: #DBA752;
        }
        &-avatar {
            margin-top: rpx(60);
            width: rpx(140);
            height: rpx(140);
            border-radius: 100%;
            border: solid rpx(4) $color0;
        }
        &-username {
            padding-top: rpx(20);
            font-size: rpx(24);
            color: $color0;
        }
        &-cardName {
            padding-top: rpx(60);
            font-size: rpx(48);
            color: $color0;
        }
    }

    .memberInfo {
        &-title {
            padding: rpx(60) rpx(30) 0;
            font-size: rpx(40);
            text-align: center;
        }
        &-list {
            display: flex;
            padding: rpx(30) rpx(15);
            &-item {
                width: 50%;
                margin-left: rpx(15);
                margin-right: rpx(15);
                padding: rpx(30);
                background: $color0;
                text-align: center;
                &-img {
                    width: rpx(110);
                    height: rpx(110);
                }
                &-title {
                    padding: rpx(60) 0 rpx(30);
                    font-size: rpx(36);
                }
                &-desc {
                    font-size: rpx(30);
                    color: $color5;
                    text-align: left;
                    line-height: 130%;
                }
            }
        }
    }
    .rebateInfo {
        background: #F5F5F5;
        &-title {
            padding: rpx(60) rpx(30) 0;
            font-size: rpx(40);
            text-align: center;
            color: #ff7d00;
        }
        &-list {
            box-sizing: border-box;
            padding: rpx(20);
            display: flex;
            flex-wrap: wrap;
            &-item {
                width: 22.19%;
                border-radius: rpx(10);
                margin: rpx(10);
                padding: 0 rpx(10);
                background: $color0;
                text-align: center;
                -moz-box-shadow:2px 2px 5px #969696;/*firefox*/ 
                -webkit-box-shadow:2px 2px 5px #969696;/*webkit*/ 
                box-shadow:2px 2px 5px #969696;/*opera或ie9*/
                &-title {
                    padding: rpx(20) 0 rpx(20);
                    font-size: rpx(28);
                }
                &-desc {
                    font-size: rpx(26);
                    color: $color5;
                    text-align: center;
                    padding-bottom: rpx(10);
                    line-height: 130%;
                }
            }
        }
    }

    .panel {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 10;
        background: rgba(0, 0, 0, 0.5);
        &-margin {
            margin-top: rpx(400);
            margin-left: rpx(60);
            margin-right: rpx(60);
            background: $color0;
        }
        &-title {
            padding-top: rpx(60);
            text-align: center;
            font-size: rpx(48);
        }
        &-desc {
            font-size: rpx(30);
            color: $color5;
            padding: rpx(30);
            line-height: 130%;
        }
        &-btn {
            border-top: solid 1px $color2;
            padding: rpx(30);
            font-size: rpx(36);
            text-align: center;
        }
    }

    .bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        border-top: solid 1px $color2;
        height: rpx(120);
        background: $color0;
        z-index: 9;
        &-btn {
            margin-top: rpx(20);
            margin-left: rpx(30);
            margin-right: rpx(30);
            border-radius: $radius6;
            height: rpx(80);
            line-height: rpx(80);
            background: $color1;
            font-size: rpx(34);
            color: #f3d777;
            text-align: center;
        }
        &-btn2 {

            background: $color5;
            color: $color2;
        }
    }
</style>